<template>
  <view class="bg-[#F7F8FA] h-[100vh] flex flex-col relative">
    <div
      class="bg-[url(/static/WX20250626-201439@2x.png)] bg-cover bg-no-repeat opacity-30 absolute top-0 left-0 h-[100vh] w-full">
    </div>
    <!-- <Navbar title="首页"/> -->
    <view class="flex-1 px-4 relative z-1 h-[100vh] overflow-auto pb-20">
      <h2 class="text-[24rpx] font-[300]! text-gray-800 my-3">访客记录</h2>
      <Card shadow class="bg-[#fff]">
        <TnButton type="info" class="w-full! h-[80rpx] mb-4! bg-gradient-to-r from-[#83D2EE] to-[#98F5A5]"
          @click="handleClick(1)">
          一般性访客记录
        </TnButton>
        <TnButton type="info" class="w-full! h-[80rpx] mb-4! bg-gradient-to-r from-[#F1A37D] to-[#EE748B]"
          @click="handleClick(2)">
          物资进出类登记
        </TnButton>
        <TnButton type="info" class="w-full! h-[80rpx] bg-gradient-to-r from-[#586DF0] to-[#BBE5DE]"
          @click="handleClick(3)">
          自有货车进出登记
        </TnButton>
      </Card>


      <h2 class="text-[24rpx] font-[300]! text-gray-800 my-3">今日访客</h2>
      <view class="grid grid-cols-2 gap-4">
        <view
          class="relative card bg-red-500/80 text-white rounded-md p-4 flex flex-col justify-center items-start bg-[url('https://resource.tuniaokj.com/images/cool_bg_image/3.png')] bg-no-repeat bg-cover bg-center ">
          <text class="text-sm font-bold">5人</text>
          <text class="text-[24rpx] mt-1">一般性访客记录</text>
          <text
            class="iconfont icon-fangke absolute top-[50%] right-2 translate-y-[-50%] opacity-20 text-[46rpx]!"></text>
        </view>

        <view
          class="relative card bg-yellow-400/80 text-white rounded-md p-4 flex flex-col justify-center items-start bg-[url('https://resource.tuniaokj.com/images/cool_bg_image/3.png')] bg-no-repeat bg-cover bg-center ">
          <text class="text-sm font-bold">8人</text>
          <text class="text-[24rpx] mt-1">物资进出类登记</text>
          <text
            class="iconfont icon-wuzimingcheng absolute top-[50%] right-2 translate-y-[-50%] opacity-40 text-[76rpx]!"></text>
        </view>

        <view
          class="relative card bg-purple-500/80 text-white rounded-md p-4 flex flex-col justify-center items-start bg-[url('https://resource.tuniaokj.com/images/cool_bg_image/3.png')] bg-no-repeat bg-cover bg-center ">
          <text class="text-sm font-bold">1人</text>
          <text class="text-[24rpx] mt-1">自有货车进出登记</text>
          <text
            class="iconfont icon-huoche absolute top-[50%] right-2 translate-y-[-50%] opacity-20 text-[96rpx]!"></text>
        </view>

        <!-- 其他业务卡片 -->
        <view
          class="card bg-blue-500/80 text-white rounded-md p-4 flex flex-col justify-center items-start bg-[url('https://resource.tuniaokj.com/images/cool_bg_image/3.png')] bg-no-repeat bg-cover bg-center ">
          <text class="text-sm font-bold">....</text>
          <text class="text-[24rpx] mt-1">更多</text>
        </view>
      </view>

      <!-- 数据可视化 -->
      <h2 class="text-[24rpx] font-[300]! text-gray-800 my-3 mt-10!">访客记录</h2>
      <Bar />
      <PopupForm :data="[
        {
          label: '时间',
          value: '2050-01-01 00:00:00',
          component: 'text'
        },
        {
          label: '车牌号',
          prop: 'username',
          value: '',
          component: 'TnInput',
          rules: [
            {
              required: true,
              message: '请输入车牌号',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '司机',
          prop: 'password',
          value: '',
          component: 'TnInput',
          rules: [
            {
              required: true,
              message: '请输入车牌号',
              trigger: 'blur'
            }
          ]
        }
      ]" />
    </view>
    <Tabbar :currentTabbar="0" v-if="show" />
  </view>
</template>

<script setup lang="ts">
import { Card } from '@/components/card';
import { Bar } from '@/components/bar';
import { Tabbar } from '@/components/tabbar';
import { navigateTo } from '@/utils/utils';
import { TnButton } from '@tuniao/tnui-vue3-uniapp';
import { onShow } from '@dcloudio/uni-app';
import { ref, nextTick } from 'vue';
import { PopupForm } from '@/components/popupForm';
import type rule from '@tuniao/tnui-vue3-uniapp/libs/async-validator/rule';
const show = ref(true);
onShow(() => {
  show.value = false;
  nextTick(() => {
    show.value = true;
  })
})
const paths = {
  1: '/pages/general-visitors/form/securityStaff',
  2: '/pages/general-visitors/form/visitor',
  3: '/pages/general-visitors/form/visitor',
}
const handleClick = (type: keyof typeof paths) => {
  navigateTo(paths[type])
}
</script>

<style lang="scss">
/* 若需补充额外样式，可在此写；UnoCSS 已覆盖大部分，一般无需过多 */
.card {
  transition: all 0.2s ease;

  &:hover {
    transform: scale(1.02);
    opacity: 0.95;
  }
}
</style>